<template>
	<view class="contain">
		<view class="clickclass4" >
			<view class="signIn-top">
				<view class="signIn" :class="{'signIn-highlight-left':isActive=='1'}" @click="isActive='1';selectionChangenew()" >
					日
				</view>
				<view class="signIn" :class="{'signIn-highlight-right':isActive=='2'}" @click="isActive='2';selectionChangenew()">
					月
				</view>
			</view>
		</view>
		<view class="text-center padding-tb" style="font-weight: bold;font-size: 15px;">
			 <view class="" @click="show = true">
			     {{datavalue1}}
			 </view>
		</view>
		<view class="middle">
			<view class="middle-top">
				<view class="left-label"></view>
				<u-cell-group :border="false" > 
					<u-cell
					title="全园统计"   :border="false" titleStyle="font-weight: bold;"
					></u-cell>
				</u-cell-group>
			</view>
			<view class="" style="display: flex;">
				<view class="charts-box">
					<qiun-data-charts
					  type="arcbar"
					  :inScrollView="true"
					  :opts="opts"
					  :chartData="chartData"
					/>
				</view>
				<view class="rightDAta">
					<view class="flex margin-tb-xs">
						<view class="text-gray left-text">
							应出勤
						</view>
						<view class="" style="margin-left: 25px;">
							 <text class="text-bold">{{datalist.totalCount}}</text>  
							 <text>{{isActive=='2'?'次':'人'}}</text>
						</view>
					</view>
					<view class="flex margin-tb-xs">
						<view class="text-gray left-text">
							已出勤
						</view>
						<view class="" style="margin-left: 25px;">
							 <text class="text-bold">{{datalist.attendCount}}</text> <text>{{isActive=='2'?'次':'人'}}</text>
						</view>
					</view>
					<view class="flex margin-tb-xs">
						<view class="text-gray left-text">
							缺勤
						</view>
						<view class="" style="margin-left: 25px;">
							 <text class="text-bold">{{datalist.noneCount}}</text> <text>{{isActive=='2'?'次':'人'}}</text>
						</view>
					</view>
					<view class="flex margin-tb-xs">
						<view class="text-gray left-text">
							病假
						</view>
						<view class="" style="margin-left: 25px;">
							 <text class="text-bold">{{datalist.leaveCount}}</text> <text>{{isActive=='2'?'次':'人'}}</text>
						</view>
					</view>
					<view class="flex margin-tb-xs">
						<view class="text-gray left-text">
							事假
						</view>
						<view class="" style="margin-left: 25px;">
							 <text class="text-bold">{{datalist.personalCount}}</text> <text>{{isActive=='2'?'次':'人'}}</text>
						</view>
					</view>
					<!-- <view class="flex margin-tb-xs">
						<view class="text-gray left-text">
							早退
						</view>
						<view class="" style="margin-left: 25px;">
							 <text class="text-bold">0</text> 人
						</view>
					</view>
					<view class="flex margin-tb-xs">
						<view class="text-gray left-text">
							缺卡
						</view>
						<view class="" style="margin-left: 25px;">
							 <text class="text-bold">0</text> 人
						</view>
					</view> -->
				</view>  
			</view>
		</view>
		<!-- :url="'atendStatis?classId='+item.classId+'&datetype='+datetype+'&date='+datavalue1" -->
		<view class="middles-top" v-for="(item,index) in classData" :key="index">
			<view class="" style="background-color: #fff;padding: 15px 0 20px 0;">
				<view class="">
					<u-cell-group :border="false" >
						<u-cell
						:title="item.className"  isLink :border="false" titleStyle="font-weight: bold;"  :value="'出勤率 ' + item.classPercent"
						:url="'../../../systemsubPack/attendance/student/sign_in/list?classId='+item.classId+'&date='+datavalue1"
						></u-cell>
					</u-cell-group>
					<view class="flex" style="margin-top: 10px;">
						<view class="piece">
							<view class="">
								<text class="text-bold">{{item.totalCount}}</text><text>{{isActive=='2'?'次':'人'}}</text>
							</view>
							<view class="text-gray margin-tb-xs">
								应出勤
							</view>
						</view>
						<view class="piece">
							<view class="">
								<text class="text-bold">{{item.attendCount}}</text><text>{{isActive=='2'?'次':'人'}}</text>
							</view>
							<view class="text-gray margin-tb-xs">
								已出勤
							</view>
						</view>
						<view class="piece">
							<view class="">
								<text class="text-bold">{{item.noneCount}}</text><text>{{isActive=='2'?'次':'人'}}</text>
							</view>
							<view class="text-gray margin-tb-xs">
								缺勤
							</view>
						</view>
						<view class="piece">
							<view class="">
								<text class="text-bold">{{item.leaveCount}}</text><text>{{isActive=='2'?'次':'人'}}</text>
							</view>
							<view class="text-gray margin-tb-xs">
								病假
							</view>
						</view>
						<view class="piece">
							<view class="">
								<text class="text-bold">{{item.personalCount}}</text><text>{{isActive=='2'?'次':'人'}}</text>
							</view>
							<view class="text-gray margin-tb-xs">
								事假
							</view>
						</view>
						<!-- <view class="piece">
							<view class="">
								<text class="text-bold">0</text>人
							</view>
							<view class="text-gray margin-tb-xs">
								迟到
							</view>
						</view>
						<view class="piece">
							<view class="">
								<text class="text-bold">0</text>人
							</view>
							<view class="text-gray margin-tb-xs">
								早退
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;height: 10px;background-color: #f7f7f7;">
				
			</view>
			
		</view>
		<u-datetime-picker
				:show="show"
				v-model="value1"
				:mode="datetype"
				ref="datetimePicker"
				:closeOnClickOverlay="true"
				confirmColor = "#1cb8a7"
				:maxDate="value2"
				@close="close"
				@confirm="confirm"
				@cancel="cancel"
		></u-datetime-picker>
		
		
	</view>
</template>

<script>
	import {
		ListStatisticalBySchool,
		ListStatisticalByClass
	} from '@/api/attendanceRecordTotal.js'
	import qiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
	
	//引用配置文件 用于改写样式覆盖使用
	export default {
		data() {
			return {
				isActive:'1',
				show: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				datavalue1:'',
				datetype:'date',
				chartData: {},
				opts: {},
				datalist:[],
				classData:[],
				
			};
		},
		watch:{
		
		},
		components:{
			qiunDataCharts
			// uCharts
		},
		onLoad() {
			console.log('this.value1',this.value1);
			this.firstlistday(this.value1);
			this.value1 = this.result(this.value1,this.datetype);
			this.datavalue1 = this.value1;
			this.param = {attendDay: this.datavalue1};
			this.getServerData(this.param);
			this.listStatisticalByClass(this.param);
		},
		methods: {
			selectionChangenew(){
				if(this.isActive =='1'){
					this.datetype = 'date';
					this.value1 = Number(new Date());
					this.value1 = this.result(this.value1,this.datetype);
					this.datavalue1 = this.value1;
					if(this.datavalue1.length==7){
						this.datavalue1 = this.value1;
					}
					this.param = {attendDay: this.datavalue1};
				}else{
					this.datetype = 'year-month';
					this.param = {
						startTime : this.firstDayStr,
						endTime : this.lastDayStr
					}
				}
				this.value1 = Number(new Date());
				this.value1 = this.result(this.value1,this.datetype);
				this.datavalue1 = this.value1;
				this.firstlistday(this.value1);
				this.getServerData(this.param);
				this.listStatisticalByClass(this.param);
			},
			getServerData(param) {
			  ListStatisticalBySchool(param).then(
			  	res => {
			  		if (res.data.code == '0') {
						this.datalist = res.data.data.list[0];
						// Math.round(String(parseInt(res.data.data.list[0].attendCount)/parseInt(res.data.data.list[0].totalCount)*100)))+'%'  
						console.log('ddeddedededded=======',Math.round(String(parseInt(res.data.data.list[0].attendCount)/parseInt(res.data.data.list[0].totalCount)*100))+'%')
						this.res = {
							series: [
							  {
								name: "出勤率",
								color: "#2fc25b",
								data: String(parseInt(res.data.data.list[0].attendCount)/parseInt(res.data.data.list[0].totalCount)),
							  }
							  
							]
						  };
						let optss = {
							color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
							  title: {
							    name: Math.round(String(parseInt(res.data.data.list[0].attendCount)/parseInt(res.data.data.list[0].totalCount)*100))+'%',
							    fontSize: 25,
							    color: "#1cb8a7"
							  },
							  subtitle: {
							    name: "出勤率",
							    fontSize: 12,
							    color: "#666666"
							  },
							  extra: {
							    arcbar: {
							      type: "circle",
							      width: 12,
							      backgroundColor: "#E9E9E9",
							      startAngle: 1.5,
							      endAngle: 0.25,
							      gap: 2
							    }
							  }
						}
						this.chartData = JSON.parse(JSON.stringify(this.res));
						this.opts = JSON.parse(JSON.stringify(optss));
			  		} else {
			  			this.$api.showTip(res.data.msg)
			  		}
			  	},
			  	err => {
			  		this.$api.showTip('服务器错误')
			  	}
			  );
			  
			  
			},
			
			listStatisticalByClass(param){
				param.pageSize = 100;
				ListStatisticalByClass(param).then(
					res => {
						if (res.data.code == '0') {
							this.classData = res.data.data.list;
						} else {
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.$api.showTip('服务器错误')
					}
				);
			},
			
			
			// @close="close"
			// @confirm="confirm"
			// @cancel="cancel"
			close(){
				this.show = false;
			},
			confirm(e){
				console.log('我是时间啦',e);
				this.show = false;
				this.value1 = this.result(e.value, e.mode);
				this.datavalue1 = this.value1; 
				this.firstlistday(e.value);
				if(e.mode=='date'){
					this.param = {attendDay: this.datavalue1};
				}else{
					this.param = {
						startTime : this.firstDayStr,
						endTime : this.lastDayStr
 					}
				}
				this.getServerData(this.param);
				this.listStatisticalByClass(this.param);
			},
			
			firstlistday(e){
				// 将时间戳转换为Date对象
				const date = new Date(e);
				// 获取该月份的第一天
				const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
				// 获取该月份的最后一天
				const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
				this.firstDayStr = this.formatDate(firstDay); 
				this.lastDayStr = this.formatDate(lastDay);
			},
			
			// 将日期格式化为正常时间格式
			formatDate (date)  {
			  let year = date.getFullYear();
			  let month = date.getMonth() + 1;
			  let day = date.getDate();
			  month = month > 10 ? month : '0' + month;
			  day = day > 10 ? day : '0' + day;
			  return `${year}-${month}-${day}`;
			},
			
			cancel(){
				this.show = false;
			},
			
			result(time, mode) {
			const timeFormat = uni.$u.timeFormat,
				toast = uni.$u.toast
			switch (mode) {
				case 'datetime':
					return timeFormat(time, 'yyyy-mm-dd hh:MM')
				case 'date':
					return timeFormat(time, 'yyyy-mm-dd')
				case 'year-month':
				   return  timeFormat(time, 'yyyy-mm')
				case 'time':
				    return time
				default:
					return ''
			}
		},
		},
		onReady() {
			
		},
	};
</script>

<style  lang="scss" scoped>
	page {
		width: 100%;
		height: 100% !important;
		background-color: #f7f7f7;
	}
	.clickclass4{
		width: 100%;
		text-align: -webkit-center;
		line-height: 36px;
		padding: 10rpx 10rpx;
		background-color: #fff;
	}
	
	.signIn-top{
		width: 100px;
		height: 30px;
		border: 1px solid #ddd;
		border-radius: 15px;
		display: flex;
	}
	
	/deep/.u-cell__body{
		padding: 10px 8px;
	}
	
	.left-label{
		width: 5px;height: 16px;background-color: rgb(28, 184, 167);border-radius: 3px;flex-direction: column;margin: 13px 0 13px 10px;
	}
	
	.righttex{
		text-align: right;
	}
	
	.signIn{
	 width: 50%;
	 text-align: center;
	 line-height: 30px;
	}
	
	
	
	.signIn-highlight-left{
	 width: 50%;
	 text-align: center;
	 line-height: 30px;
	 border-right:1px solid rgb(28, 184, 167);
	 border-top-right-radius:15px;
	 border-bottom-right-radius:15px;
	 border-left:1px solid rgb(28, 184, 167);
	 border-top-left-radius:15px;
	 border-bottom-left-radius:15px;
	 background-color: rgb(28, 184, 167);
	 color: aliceblue;
	}
	
	.signIn-highlight-right{
	 width: 50%;
	 text-align: center;
	 line-height: 30px;
	 border-left:1px solid rgb(28, 184, 167);
	 border-top-left-radius:15px;
	 border-bottom-left-radius:15px;
	 border-right:1px solid rgb(28, 184, 167);
	 border-top-right-radius:15px;
	 border-bottom-right-radius:15px;
	 background-color: rgb(28, 184, 167);
	 color: aliceblue;
	}
	
	.middle{
		background-color: #fff;
		// padding: 20px 10px;
	}
	
	.left-text{
		width: 50px;text-align: right;
	}
	
	.middle-top{
		display: flex;
		
	}
	
	.middles-top{
		
		// margin-top: 20px;
	}
	
	/deep/.u-cell__value{
		color: #000000 !important;
	}
	.charts-box {
		// padding-top: 55px;
	    width: 65%;
	    height: 300rpx;
		margin-top: 60rpx;
	}
	.rightDAta{
		text-align: center;
		width: 35%;
	}
	
	.piece{
		width: 20%;text-align: center;
	}
	
	.margin-tb-xs {
	    margin-top: 17px !important; 
	}
	
</style>